import { addDoctor, getDoctorsInfo, getDoctorTags, getHospitals } from '@/services/api/docApi';
import { serverUrl } from '@/utils/tools';
import { DeleteFilled, EditFilled, PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  PageContainer,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
  ProTable,
} from '@ant-design/pro-components';

import { Button, message, Popconfirm, Space } from 'antd';
import { useRef, useState } from 'react';

function DoctorsInfo() {
  const [myForm] = ProForm.useForm();
  //选中的医院们
  const [selectedHospitals, setSelectedHospitals]: any = useState([]);
  //模态框显隐
  const [isShow, setIsShow] = useState(false);
  //新增地址搜索

  const ref: any = useRef(null);

  //当前修改的医院id

  const [changeDoctorid, setChangeDoctorid] = useState('');

  return (
    <PageContainer>
      <ProTable
        search={false}
        rowSelection={{
          onChange: async (arr) => {
            await setSelectedHospitals(arr);
          },
        }}
        actionRef={ref}
        rowKey="id"
        columns={[
          {
            title: '照片',
            hideInSearch: true,
            dataIndex: 'image',
            render(r, c) {
              return (
                <img
                  src={c.avatar.startsWith('http') ? c.avatar : serverUrl + c.avatar}
                  alt="医生图片"
                  style={{ width: '100px' }}
                />
              );
            },
          },
          { title: '名称', hideInSearch: true, ellipsis: true, copyable: true, dataIndex: 'name' },
          {
            title: '简介',
            ellipsis: true,
            hideInSearch: true,
            dataIndex: 'desc',
          },
          {
            title: '职称',

            ellipsis: true,
            hideInSearch: true,
            dataIndex: 'doctorTitleInfo',
          },
          {
            title: '标签',
            ellipsis: true,
            hideInSearch: true,
            dataIndex: 'tags',
          },
          {
            title: '科室',
            ellipsis: true,

            hideInSearch: true,
            dataIndex: 'departmentInfo',
          },
          {
            title: '所在医院',
            ellipsis: true,

            hideInSearch: true,
            dataIndex: 'hospitalInfo',
          },
          {
            title: '操作',
            hideInSearch: true,
            render(r: any) {
              return (
                <Space>
                  {/* 修改 */}
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<EditFilled />}
                    onClick={() => {
                      setChangeDoctorid(r.id);
                      setIsShow(true);
                      console.log(r);

                      myForm.setFieldsValue({
                        ...r,
                        avatar: [
                          {
                            name: r.name + '.png',
                            uid: crypto.randomUUID(),
                            thumbUrl: r.avatar,
                          },
                        ],
                      });
                    }}
                  />
                  <Popconfirm
                    title="确认删除"
                    description="你确定删除该条医院信息吗?"
                    cancelText="取消"
                    okText="确认"
                    onConfirm={() => {
                      message.success('删除成功!');
                      ref.current.reload();
                    }}
                  >
                    <Button type="primary" shape="circle" icon={<DeleteFilled />} danger />
                  </Popconfirm>
                </Space>
              );
            },
          },
        ]}
        request={getDoctorsInfo}
        // @ts-ignore
        toolBarRender={() => (
          <>
            <Button
              key="button"
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                setChangeDoctorid('');
                setIsShow(true);
              }}
            >
              新建
            </Button>
            <Popconfirm
              title="确认删除"
              description="你确定删除选中的医院信息吗?"
              cancelText="取消"
              okText="确认"
              onConfirm={async () => {
                // await delHospitals(selectedHospitals);
                // setSelectedHospitals([]);
                // message.success('删除成功!');
                // ref.current.clearSelected();
                // ref.current.reload();
              }}
            >
              <Button
                key="button"
                icon={<DeleteFilled />}
                type="primary"
                danger
                style={{ display: selectedHospitals.length > 0 ? '' : 'none' }}
              >
                删除选中
              </Button>
            </Popconfirm>
          </>
        )}
      ></ProTable>
      <ModalForm
        form={myForm}
        title="新增医生信息"
        open={isShow}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setChangeDoctorid('');

            setIsShow(false);
          },
        }}
        submitTimeout={2000}
        // @ts-ignore
        onFinish={async (values) => {
          await addDoctor({ ...values, tags: values.tags.map((v: any) => v.value).join(',') });
          setIsShow(false);
          console.log(myForm);

          ref.current.reload();
        }}
      >
        <ProFormUploadButton
          name="avatar"
          label="上传图片"
          max={1}
          fieldProps={{
            name: 'file',
            listType: 'picture-card',
          }}
          action={serverUrl + '/common/upload'}
        />
        <ProFormText
          required
          rules={[{ required: true, message: '这是必填项' }]}
          width="md"
          name="name"
          label="医生名称"
          placeholder="请输入医生名称"
          fieldProps={{ allowClear: true, maxLength: 12, showCount: true }}
        />
        <ProFormTextArea
          required
          rules={[{ required: true, message: '这是必填项' }]}
          colProps={{ span: 24 }}
          fieldProps={{ maxLength: 3000, showCount: true, allowClear: true }}
          name="desc"
          label="描述信息"
          // tooltip="从规模、服务、等级等各层面描述"
          placeholder="请输入描述信息"
        />

        <ProFormSelect.SearchSelect
          name="tags"
          label="标签"
          placeholder="请选择标签"
          rules={[{ required: true, message: '请选择！!' }]}
          request={getDoctorTags}
        />
        <ProFormSelect
          name="hospitalId"
          label="所在医院"
          placeholder="请选择医院"
          rules={[{ required: true, message: '请选择！!' }]}
          request={getHospitals}
        />
      </ModalForm>
    </PageContainer>
  );
}

export default DoctorsInfo;
